<template>
  <div id="baidumap" />
</template>

<script>
import { BD_MAP_KEY } from '@/config/index'
export default {
  mounted() {
    this.initMapJs().then(res => {
      const map = this.createInstance(res)
      const marker = this.createMarker(res)
      map.addOverlay(marker)
    })
  },
  methods: {
    initMapJs() {
      return new Promise((resolve, reject) => {
        if (global.BMapGL) {
          resolve(global.BMapGL)
          return
        }
        global._loadMapCallback = () => {
          resolve(global.BMapGL)
        }
        const $script = document.createElement('script')
        $script.src = '//api.map.baidu.com/api?type=webgl&v=1.0&ak=' + BD_MAP_KEY + '&callback=_loadMapCallback'
        document.body.appendChild($script)
      })
    },
    createInstance(BMapGL) {
      const map = new BMapGL.Map('baidumap')
      map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true)

      return map
      // map.setMapStyle('dark')
    },
    createMarker(BMapGL) {
      var pt = new BMapGL.Point(116.417, 39.909)
      var myIcon = new BMapGL.Icon(require('@/assets/work_watch/map_cam.png'), new BMapGL.Size(46, 52))
      var marker = new BMapGL.Marker(pt, {
        icon: myIcon
      }) // 创建标注
      return marker
    }
  }

}
</script>

<style>
  #baidumap{
    width: 100%;
    height: 300px;
    background-color: saddlebrown;
  }
</style>
